<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="../assets/pic/logo.png" alt="">
        <span style="margin-left: 5px;">WMS-管理系统</span>
      </div>
      <div>
        <div class="badge">
          <el-badge :is-dot="isDotKl" class="item">
            <el-popover placement="right" minWidth="400" maxWidth="1000" trigger="click">
              <el-table :data="klgridData">
                <el-table-column width="150" property="productCode" label="物品编号"></el-table-column>
                <el-table-column width="100" property="productName" label="物品名称"></el-table-column>
                <el-table-column width="100" property="overdue" label="超期天数"></el-table-column>
                <el-table-column width="100" property="initValue" label="超期天数"></el-table-column>
              </el-table>
              <div slot="reference">库龄预警</div>
            </el-popover>
          </el-badge>
        </div>
        <div class="badge">
          <el-badge :is-dot="isDotSxx" class="item">
            <el-popover placement="right" minWidth="400" maxWidth="1000" trigger="click">
              <el-table :data="sxxgridData">
                <el-table-column width="150" property="productCode" label="物品编号"></el-table-column>
                <el-table-column width="100" property="productName" label="物品名称"></el-table-column>
                <el-table-column width="100" property="upperLowerMsg" label="上下限类型"></el-table-column>
                <el-table-column width="100" property="initValue" label="上下限数量"></el-table-column>
                <el-table-column width="100" property="upperLowerLimit" label="当前库存量"></el-table-column>
              </el-table>
              <div slot="reference">上下限预警</div>
            </el-popover>
          </el-badge>
        </div>
        <div @click="logout" class="logout">
          <el-avatar :src="require('@/assets/pic/n1.jpg')" :key='1'></el-avatar>
          <span>{{roleName}}</span>
        </div>
      </div>
    </el-header>
    <el-container>
        <el-aside  style="background-color: #24293c" v-bind:style="{ width: 200 + 'px' }">
          <el-scrollbar style="width: 201px; height: calc(100vh - 60px);" wrap-style="overflow-x: hidden;">
            <el-menu background-color="#24293c" text-color="#fff" active-text-color="#409EFF" active-background-color="#fff"
              unique-opened router :default-active="activePath">
              <el-submenu :index=item.menuRoot v-for="item in menuList" :key="item.menuRoot">
                <template slot="title">
                  <span style="margin-left: 20px;">{{item.menuName}}</span>
                </template>
                <el-menu-item :index="'/'+subItem.menuPath" v-for="subItem in item.children" :key="subItem.menuRoot" @click="navClick(subItem)">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{subItem.menuName}}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
      <el-main>
        <el-scrollbar class="scroll-container">
          <el-tag size="small" v-for="item in pageTags" :key="item.menuId" closable :effect="item.effect" @click="pageTagsClick(item)"
            @close="pageTagsClose(item)">
            {{ item.label }}
          </el-tag>
        </el-scrollbar>
        <el-scrollbar class="scroll-container" style=" margin-top: 15px;">
          <div v-if="pageTags.length>0" style="height: calc(100vh - 160px); width: 100%;">
            <router-view></router-view>
          </div>
          <div v-if="pageTags.length===0" style="height: calc(100vh - 120px); width: 100%;">
            <router-view></router-view>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        menuList: [],
        activePath: '',
        pageTags: [],

        roleName: '',
        isDotKl: false,
        isDotSxx: false,
        klForm: {
          earlyType: 0,
          pageNum: 1,
          pageSize: 10
        },
        ssxForm: {
          earlyType: 1,
          pageNum: 1,
          pageSize: 10
        },
        klgridData: [],
        sxxgridData: []
      }
    },
    methods: {
      pageTagsClick(pageTag) {
        let index = this.pageTags.map(item => item.effect).indexOf('dark')
        if (this.pageTags[index].menuId !== pageTag.menuId) {
          this.pageTags[index].effect = 'plain'
          index = this.pageTags.map(item => item.menuId).indexOf(pageTag.menuId)
          this.pageTags[index].effect = 'dark'
          this.$router.push('/' + pageTag.url)
          this.activePath = '/' + pageTag.url
          window.sessionStorage.setItem('activePageTag', JSON.stringify(pageTag))
          window.sessionStorage.setItem('activePath', pageTag.url)
        }
      },
      pageTagsClose(pageTag) {
        const index = this.pageTags.map(item => item.menuId).indexOf(pageTag.menuId)
        if (this.pageTags[index].effect === 'dark') {
          if (this.pageTags.length === 1) {
            this.$router.push('/home')
            this.activePath = '/home'
            window.sessionStorage.removeItem('activePageTag')
            window.sessionStorage.removeItem('activePath')
          } else {
            let i = index
            if (index === 0) {
              i = 2
            }
            this.pageTags[i - 1].effect = 'dark'
            this.$router.push('/' + this.pageTags[i - 1].url)
            this.activePath = '/' + this.pageTags[i - 1].url
            window.sessionStorage.setItem('activePageTag', JSON.stringify(this.pageTags[i - 1]))
            window.sessionStorage.setItem('activePath', this.pageTags[i - 1].url)
          }
        }
        this.pageTags.splice(index, 1)
      },
      async getMenuList() {
        const res = await this.$apiUtil.get('menu/userMenuList', {})
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.menuList = res.data.children
      },
      async getKlList() {
        const res = await this.$apiUtil.postByJson('earlyWarning/getEarlyWarningList', this.klForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.klgridData = res.data.earlyWarningVOS
        if (res.data.earlyWarningVOS.length > 0) {
          this.isDotKl = true
        } else {
          this.isDotKl = false
        }
      },
      async getSxxList() {
        const res = await this.$apiUtil.postByJson('earlyWarning/getEarlyWarningList', this.ssxForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.sxxgridData = res.data.earlyWarningVOS
        if (res.data.earlyWarningVOS.length > 0) {
          this.isDotSxx = true
        } else {
          this.isDotSxx = false
        }
      },
      logout() {
        this.$confirm('离开当前用户?', '退出系统', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning',
          center: true
        }).then(() => {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }).catch(() => {})
      },
      errorHandler() {
        return true
      },
      navClick(subItem) {
        this.activePath = '/' + subItem.menuPath
        window.sessionStorage.setItem('activePath', subItem.menuPath)
        let index = this.pageTags.map(item => item.effect).indexOf('dark')
        if (index !== -1) {
          this.pageTags[index].effect = 'plain'
        }
        index = this.pageTags.map(item => item.menuId).indexOf(subItem.menuId)
        if (index === -1) {
          this.pageTags.push({
            menuId: subItem.menuId,
            effect: 'dark',
            label: subItem.menuName,
            url: subItem.menuPath
          })
          window.sessionStorage.setItem('activePageTag', JSON.stringify(this.pageTags[this.pageTags.length - 1]))
        } else {
          this.pageTags[index].effect = 'dark'
          window.sessionStorage.setItem('activePageTag', JSON.stringify(this.pageTags[index]))
        }
      }
    },
    created() {
      this.roleName = window.sessionStorage.getItem('roleName')
      this.getMenuList()
      this.getKlList()
      this.getSxxList()
      this.activePath = '/' + window.sessionStorage.getItem('activePath')
      if (window.sessionStorage.getItem('activePageTag') !== null) {
        this.pageTags.push(JSON.parse(window.sessionStorage.getItem('activePageTag')))
      }
    }
  }
</script>

<style lang="less" scoped>
  .tags-view-container {
    height: 34px;
    width: 100%;
    background: #fff;
    cursor: pointer;
  }

  .scroll-container {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .el-scrollbar__wrap {
    margin-bottom: -17px;
    margin-right: -17px;
    overflow: scroll;
    height: 89px;
  }

  .home-container {
    height: 100%;
  }

  .el-header {
    background-color: #16233e;

    img {
      width: 50px;
      height: 50px;
      margin-left: 8px;
    }

    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;

    >div {
      display: flex;
      align-items: center;

      span {
        padding-left: 20px;
      }
    }

    >div .item {
      span {
        padding-left: 0px;
      }
    }

    >div>div.logout {
      cursor: pointer;
      display: flex;
      align-items: center;

      span {
        padding-left: 0px;
        margin-left: 10px;
        font-size: 18px;
      }
    }

    .badge {
      cursor: pointer;
      padding-right: 20px;
      font-size: 14px;
    }
  }

  .el-aside {
    background-color: #24293c;

    .el-menu {
      border-right: none;
    }

    span {
      padding-left: 10px;
    }
  }

  .el-main {
    background-color: #eaedf1;
  }

  .is-active {
    background-color: #eaedf1 !important;

    span {
      font-weight: bold;
    }
  }

  .el-tag {
    margin-left: 3px;
    margin-bottom: 4px;
    margin-top: 4px;
    display: inline-block;
    // width: 120px;
    // text-align: center;
  }

  .el-tag--small {
    height: 30px;
    line-height: 30px;
  }

  ::v-deep {
    .el-badge__content {
      border: none
    }
  }
</style>
